<div class="fui-datepicker-input-inner">
  <input
    type="hidden"
    [(ngModel)]="value"
  />
  <input
    type="text"
    placeholder="{{parsedPlaceholder | translate}}"
    (input)="inputChange($event)"
    [ngClass]="{'fui-input-invalid': shouldValidate && (invalid | async)}"
    [disabled]="disabled"
    [readonly]="readonly"
    #dateInput
    (blur)="touchInput()"
  />
  <button
    type="button"
    class="fui-datepicker-toggle"
    [disabled]="disabled || readonly"
    (click)="openDatepicker($event)"
  >
    <svg
      fuiIcon="calendar"
      size="md"
      color="secondary"
      [ngClass]="{'fui-input-invalid-icon': shouldValidate && (invalid | async)}"
    ></svg>
  </button>
</div>
<fui-form-error
  *ngIf="shouldValidate && (invalid | async)"
  [validationResults]="failures | async"
  [errorMsgs]="errorMsgs"
>
</fui-form-error>
